<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="icon.ico">
 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>(。• ω •。)ノ♡</title>
</head>
<body>
        
        <style>
                *{
                   
margin:0px 0px 0px 0px;
outline:none;
padding:0px 0px 0px 0px ;
             text-deration:none;
             -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        
                }
                @font-face {
                  font-family:myFirstFont;
                  src: url('font/Sansation-Light.ttf');
              }
            button{
                color:#ffffff; background:rgb(164,192,236); border-radius:100px; border:4px solid rgb(164,192,236); text-align:center;
padding:20px 40px;transition:0.3s;
                font-size:60px;outline:none;
            }
            button:hover{
            color:rgb(164,192,236);background:#ffffff;
            }
button:visited{
color:#ffffff; background:rgb(164,192,236);border-color:rgb(164,192,236);
             }
             a:checked {
              color:rgb(256,0,0);
             }
             a:visited{
            color:rgb(256,0,0);
             }
             .outbox{

             width:70%;
             height:50%;
             position:fixed;
             left:50%;
             top:50%;
             z-index:10;
             text-align:center ;
             background:#ffffff;
             border-radius:70px;
             box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            margin-left:-35%;
            margin-top:-40%;
            }
.shadow {
position:fixed;
left:0;
top:0;
width:100%;
z-index:2;
height:100%;
background:rgba(0,0,0,0.1);
}
.love{
text-decoration:none; color:rgb(256,0,0);
margin-top:20%; text-align:center; font-size:200px; color:rgb(256,0,0);
transition:0.3s ;
z-index:99;
}
.love:hover{
transition:0.3s ;
font-size :220px;
}
#boxword{
text-align:center ;
margin-top:15%;
color:#272727;
font-size:70px;
font-family:YouYuan;
margin-bottom:15%;
}
                </style>


    <script>
            $(document).ready(function(){
              $(".love").click(function(){
                $(".shadow").toggle(0);
              });
            });
            </script>

    <script>
            $(document).ready(function(){
              $(".love").click(function(){
                $(".outbox").toggle(0);
              });
            });
            </script>


    <script>
            $(document).ready(function(){
              $("button").click(function(){
                $(".outbox").toggle(0);
              });
            });
            </script>


    <script>
            $(document).ready(function(){
              $("button").click(function(){
                $(".shadow").toggle(0);
              });
            });
            </script>

<script>
$ (document).ready(function(){
            $(".shadow").hide();
          });
</script>

<script>
$ (document).ready(function(){
            $(".outbox").hide();
          });
</script>


    <div>
        <div style="width: 100%;text-align: center;margin: 0px 0px 0px 0px;">
            <p style="font-family: myFirstFont;text-align: center;color:#000000;font-size: 290px;padding: 5% 0 0 0;">
                520
            </p>
            <hr style="height:5px; margin-top:15%; margin-bottom:15%;"/>
            <p style="font-family: myFirstFont;text-align: center;font-size: 130px;">I luv U</p>
           <p class="love">♡</p>
        </div>

        <div class="outbox">
<p id="boxword">做我对象吧，好不好?</p>
<div style="margin-bottom:10%; margin-top:15%;">
<button style="font-family:YouYuan;font-size:50;">好吖</button>
</div>
<div style="margin-top:10%; ">
<button style="font-family:myFirstFont; font-size:60px;">why not</button>
</div>
        </div>
        <div class="shadow"></div>
    </div>

<!--
    <script src="https://idealclover.top/usr/themes/clover/assets/clover.js"></script>
-->
<script src="https://cdn.jsdelivr.net/gh/idealclover/clover/libs/canvas-nest/canvas-nest.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.15.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/smooth-scroll@16.0.3/dist/smooth-scroll.polyfills.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highlight.js@9.15.7/lib/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.1/dist/jquery.fancybox.min.js"></script>

<!--
<script>
    $(function() {
        $('[data-toggle="popover"]').popover()
    })
</script>
<script>
    var scroll = new SmoothScroll('a.turn-up, .article-list a', {
        offset: 100
    });
</script>
<script>
    hljs.initHighlightingOnLoad();
</script>
<script>
    var scroll = new SmoothScroll('a.turn-up, .article-list a', {
        offset: 100
    });
</script>
<script>
    $("p img").each(function(i) {
        if (!this.parentNode.href && $(this).attr("type")!=="memo") {
            $(this).wrap("<a href='" + this.src + "' data-fancybox='fancybox' data-caption='" + this.alt + "'></a>")
        }
    });
    $(document).ready(function() {
        $("[data-fancybox]").fancybox()
    });
</script>
-->


</body>
</html>
